<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <!-- Site Properities -->
    <title>FeiYong</title>

    <link rel="stylesheet" type="text/css" href="../dist/semantic.css">
    <!--<link rel="stylesheet" type="text/css" href="../css/homepage.css">-->
</head>
<body>

<div class="ui top fixed center aligned teal inverted attached segment">
    <div class="ui center aligned container">
        <h2 class="ui center aligned inverted icon header">
            <i class="circular users icon"></i>菲佣网
        </h2>
        <h3 class="ui center aligned inverted sub header">最专业的菲佣租聘网站</h3>
    </div>
</div>
<div id="hot_part">

    <div class="ui fluid container">
        <div class="ui divided items">
            <div class="item">
                <div class="middle aligned content">
                    10秒定制职位
                    <div class="ui right floated teal button"> 去登录</div>
                </div>
            </div>
        </div>
    </div>

    <div class="ui fluid container">
        <div class="ui segments">
            <div class="ui segment">
                <a href="intro.html" target="_self">
                    <div class="ui three grid">
                        <div class="middle aligned row">
                            <div class="thirteen wide column">
                                <h3 class="ui image header">
                                    <img class="ui tiny rounded image"
                                         src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569818533536&di=11e8b2e59c1d08bbced2820545149cd0&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F10%2F1709350110890.jpg">
                                    <div class="content">
                                        Nico
                                        <div class="sub header">
                                            特长:洗衣、烹饪
                                        </div>
                                        <div class="sub header">
                                            来自:中国湖南
                                        </div>
                                        <div class="sub header">
                                            评分:5.0
                                        </div>
                                    </div>
                                </h3>
                            </div>
                            <div class="three wide column">
                                <span>去了解</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="ui segment">
                <a href="intro.html" target="_self">
                    <div class="ui three grid">
                        <div class="middle aligned row">
                            <div class="thirteen wide column">
                                <h3 class="ui image header">
                                    <img class="ui tiny rounded image"
                                         src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569818533536&di=11e8b2e59c1d08bbced2820545149cd0&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F10%2F1709350110890.jpg">
                                    <div class="content">
                                        Nico
                                        <div class="sub header">
                                            特长:洗衣、烹饪
                                        </div>
                                        <div class="sub header">
                                            来自:中国湖南
                                        </div>
                                        <div class="sub header">
                                            评分:5.0
                                        </div>
                                    </div>
                                </h3>
                            </div>
                            <div class="three wide column">
                                <span>去了解</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="ui segment">
                <a href="intro.html" target="_self">
                    <div class="ui three grid">
                        <div class="middle aligned row">
                            <div class="thirteen wide column">
                                <h3 class="ui image header">
                                    <img class="ui tiny rounded image"
                                         src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569818533536&di=11e8b2e59c1d08bbced2820545149cd0&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F10%2F1709350110890.jpg">
                                    <div class="content">
                                        Nico
                                        <div class="sub header">
                                            特长:洗衣、烹饪
                                        </div>
                                        <div class="sub header">
                                            来自:中国湖南
                                        </div>
                                        <div class="sub header">
                                            评分:5.0
                                        </div>
                                    </div>
                                </h3>
                            </div>
                            <div class="three wide column">
                                <span>去了解</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="ui segment">
                <a href="intro.html" target="_self">
                    <div class="ui three grid">
                        <div class="middle aligned row">
                            <div class="thirteen wide column">
                                <h3 class="ui image header">
                                    <img class="ui tiny rounded image"
                                         src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569818533536&di=11e8b2e59c1d08bbced2820545149cd0&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F10%2F1709350110890.jpg">
                                    <div class="content">
                                        Nico
                                        <div class="sub header">
                                            特长:洗衣、烹饪
                                        </div>
                                        <div class="sub header">
                                            来自:中国湖南
                                        </div>
                                        <div class="sub header">
                                            评分:5.0
                                        </div>
                                    </div>
                                </h3>
                            </div>
                            <div class="three wide column">
                                <span>去了解</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="ui segment">
                <a href="intro.html" target="_self">
                    <div class="ui three grid">
                        <div class="middle aligned row">
                            <div class="thirteen wide column">
                                <h3 class="ui image header">
                                    <img class="ui tiny rounded image"
                                         src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569818533536&di=11e8b2e59c1d08bbced2820545149cd0&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F10%2F1709350110890.jpg">
                                    <div class="content">
                                        Nico
                                        <div class="sub header">
                                            特长:洗衣、烹饪
                                        </div>
                                        <div class="sub header">
                                            来自:中国湖南
                                        </div>
                                        <div class="sub header">
                                            评分:5.0
                                        </div>
                                    </div>
                                </h3>
                            </div>
                            <div class="three wide column">
                                <span>去了解</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

<div id="search_part">
    <div class="ui fluid action input">
        <div class="ui basic floating dropdown button">
            <div class="text">全国</div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">湖南</div>
                <div class="item">上海</div>
                <div class="item">北京</div>
                <div class="item">广东</div>
                <div class="item">海南</div>
            </div>
        </div>
        <input type="text" id="searchKey" placeholder="搜索职位或者公司">
        <div class="ui button" id="search_job">
            搜索
        </div>
    </div>

    <div class="ui divided items" id="history_items">

    </div>

    <div id="search_area">
        <div class="ui container">
            <div class="ui segments">
                <div class="ui segment">
                    <a href="intro.html" target="_self">
                        <div class="ui three grid">
                            <div class="middle aligned row">
                                <div class="thirteen wide column">
                                    <h3 class="ui image header">
                                        <img class="ui tiny rounded image"
                                             src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569818533536&di=11e8b2e59c1d08bbced2820545149cd0&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F10%2F1709350110890.jpg">
                                        <div class="content">
                                            Nico
                                            <div class="sub header">
                                                特长:洗衣、烹饪
                                            </div>
                                            <div class="sub header">
                                                来自:中国湖南
                                            </div>
                                            <div class="sub header">
                                                评分:5.0
                                            </div>
                                        </div>
                                    </h3>
                                </div>
                                <div class="three wide column">
                                    <span>去了解</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="ui segment">
                    <a href="intro.html" target="_self">
                        <div class="ui three grid">
                            <div class="middle aligned row">
                                <div class="thirteen wide column">
                                    <h3 class="ui image header">
                                        <img class="ui tiny rounded image"
                                             src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569818533536&di=11e8b2e59c1d08bbced2820545149cd0&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F10%2F1709350110890.jpg">
                                        <div class="content">
                                            Nico
                                            <div class="sub header">
                                                特长:洗衣、烹饪
                                            </div>
                                            <div class="sub header">
                                                来自:中国湖南
                                            </div>
                                            <div class="sub header">
                                                评分:5.0
                                            </div>
                                        </div>
                                    </h3>
                                </div>
                                <div class="three wide column">
                                    <span>去了解</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="ui segment">
                    <a href="intro.html" target="_self">
                        <div class="ui three grid">
                            <div class="middle aligned row">
                                <div class="thirteen wide column">
                                    <h3 class="ui image header">
                                        <img class="ui tiny rounded image"
                                             src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569818533536&di=11e8b2e59c1d08bbced2820545149cd0&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F10%2F1709350110890.jpg">
                                        <div class="content">
                                            Nico
                                            <div class="sub header">
                                                特长:洗衣、烹饪
                                            </div>
                                            <div class="sub header">
                                                来自:中国湖南
                                            </div>
                                            <div class="sub header">
                                                评分:5.0
                                            </div>
                                        </div>
                                    </h3>
                                </div>
                                <div class="three wide column">
                                    <span>去了解</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="ui segment">
                    <a href="intro.html" target="_self">
                        <div class="ui three grid">
                            <div class="middle aligned row">
                                <div class="thirteen wide column">
                                    <h3 class="ui image header">
                                        <img class="ui tiny rounded image"
                                             src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569818533536&di=11e8b2e59c1d08bbced2820545149cd0&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F10%2F1709350110890.jpg">
                                        <div class="content">
                                            Nico
                                            <div class="sub header">
                                                特长:洗衣、烹饪
                                            </div>
                                            <div class="sub header">
                                                来自:中国湖南
                                            </div>
                                            <div class="sub header">
                                                评分:5.0
                                            </div>
                                        </div>
                                    </h3>
                                </div>
                                <div class="three wide column">
                                    <span>去了解</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="ui segment">
                    <a href="intro.html" target="_self">
                        <div class="ui three grid">
                            <div class="middle aligned row">
                                <div class="thirteen wide column">
                                    <h3 class="ui image header">
                                        <img class="ui tiny rounded image"
                                             src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569818533536&di=11e8b2e59c1d08bbced2820545149cd0&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F10%2F1709350110890.jpg">
                                        <div class="content">
                                            Nico
                                            <div class="sub header">
                                                特长:洗衣、烹饪
                                            </div>
                                            <div class="sub header">
                                                来自:中国湖南
                                            </div>
                                            <div class="sub header">
                                                评分:5.0
                                            </div>
                                        </div>
                                    </h3>
                                </div>
                                <div class="three wide column">
                                    <span>去了解</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="mine_part">
    <div class="ui fluid container">
        <div class="ui two column centered grid">
            <div class="center aligned column">
                <button class="fluid ui teal big button">
                    登录/注册
                </button>
            </div>
        </div>
        <div class="ui two column centered grid">
            <div class="two column centered row">
                <div class="center aligned column">
                    <button class="fluid ui teal massive button">
                        投递
                    </button>
                </div>
                <div class="center aligned column">
                    <button class="fluid ui teal massive button">
                        面试
                    </button>
                </div>
            </div>
            <div class="two column centered row">
                <div class="center aligned column">
                    <button class="fluid ui teal massive button">
                        邀约
                    </button>
                </div>
                <div class="center aligned column">
                    <button class="fluid ui teal massive button">
                        收藏
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ui sticky" style="left: 376.5px; width: 768px !important; height: 43px !important;">
    <div class="ui teal three item bottom fixed inverted menu">
        <a class="active item" id="item1"><i class="envelope outline icon"></i>职位</a>
        <a class="item" id="item2"><i class="search icon"></i>搜索</a>
        <a class="item" id="item3"><i class="user outline icon"></i> 我的</a>
    </div>
</div>

<script src="https://kanghe-jtys.oss-cn-shenzhen.aliyuncs.com/js/jquery-3.3.1.js"></script>
<script src="../dist/semantic.js"></script>
<script src="../js/homepage.js"></script>
<script type="text/javascript">
    var historyKey = [];

    $(function () {
        $("#hot_part").show();
        $("#search_part").hide();
        $("#mine_part").hide();
        $("#item1").click(function () {
            $("#item2").removeClass("active");
            $("#item3").removeClass("active");
            $("#item1").addClass("active");
            $("#hot_part").show();
            $("#search_part").hide();
            $("#mine_part").hide();
        });

        $("#item2").click(function () {
            $("#item1").removeClass("active");
            $("#item2").removeClass("active");
            $("#item2").addClass("active");
            $("#hot_part").hide();
            $("#search_part").show();
            $("#mine_part").hide();
            $("#search_area").hide();
            console.log(historyKey.length);
            if (historyKey.length > 0) {
                $("#history_items").show();
                $("#history_items").empty();
                for (var i = 0; i < historyKey.length; i++) {
                    var html = "";
                    html += '<div class="item" id="item' + i + '"><div class="middle aligned content">';
                    html += historyKey[i];
                    html += '<a onclick="deleteHref(' + i + ')"><i class="right floated close tiny icon"></i></a>';
                    html += '</div></div>';
                    $("#history_items").append(html);
                }
            }
        });

        $("#item3").click(function () {
            $("#item1").removeClass("active");
            $("#item2").removeClass("active");
            $("#item3").addClass("active");
            $("#hot_part").hide();
            $("#search_part").hide();
            $("#mine_part").show();
        });

        $("#search_area").hide();
    });

    $("#search_job").click(function () {
        var searchKey = $("#searchKey").val();
        if (searchKey != "" && searchKey != undefined) {
            historyKey.push(searchKey);
        }
        $("#search_area").show();
    });

    function deleteHref(num) {
        var itemNum = "#item" + num;
        $(itemNum).remove();
        delete historyKey[num];
    }
</script>
</body>
</html>